<!--
@Descripttion 数字框
@version 1.0.0
@Author Bell
@ 使用
  引入组件
    import FInputNumber from '@/components/form/f-input-number'
  注册组件
    components: {
      FInputNumber
    }
  使用
    <FInputNumber v-model.trim="xxx" />
    <FInputNumber v-model.trim="xxx" :controls="true" :min="" :max="" step="" precision="" width="220px" :disabled="false" placeholder="请输入" />
    controls    Boolean 默认值(true)      是否启用控制按钮
    min         Number  默认值(-Infinity) 最小值
    max         Number  默认值(Infinity)  最大值
    step        Number  默认值(1)         每次递增
    precision   Number  默认值(0)         小数点精度
    width       String  默认值(220px)     输入框宽度
    disabled    Boolean 默认值(false)     是否失效
    placeholder String  默认值(请输入)     默认占位文本
 -->
<template>
  <el-input-number
    :value="value"
    @input="changeVal"
    :controls="controls"
    :min="min"
    :max="max"
    :step="step"
    :precision="precision"
    :style="`width: ${width}`"
    :disabled="disabled"
    :placeholder="placeholder"
  >
  </el-input-number>
</template>

<script>
export default {
  name: 'f-input-number',
  props: {
    value: {
      required: true
    },
    // 是否启用控制按钮
    controls: {
      type: Boolean,
      default: true
    },
    // 最小值
    min: {
      type: Number,
      default: -Infinity
    },
    // 最大值
    max: {
      type: Number,
      default: Infinity
    },
    // 每次递增
    step: {
      type: Number,
      default: 1
    },
    // 小数点精度
    precision: {
      type: Number,
      default: 0
    },
    // 输入框宽度
    width: {
      type: String,
      default: '220px'
    },
    // 是否失效
    disabled: {
      type: Boolean,
      default: false
    },
    // 默认占位文本
    placeholder: {
      type: String,
      default() {
        return this.$t('placeholder.Please enter')
      }
    }
  },
  methods: {
    changeVal(value) {
      this.$emit('input', value)
    }
  }
}
</script>
<style lang="less" scoped>
  .el-input-number /deep/.el-input__inner{
    text-align: left;
  }
</style>
